<script setup>
import '../../assets/data'
import {ref,onMounted} from 'vue'
import axios from 'axios'
let txt = ref(null);

onMounted(() => {
    axios.get('/api/daipeisong').then(res => {
        txt.value = res.data.data
        console.log(res);
    })
})
</script>

<template>
    <div class="hezi">
        <RouterLink to="/dpsxq">
            <div class="dd" v-for="(item,index) in txt" :key="index">
                <div class="d1">{{ item.bianhao }}</div>
                <div class="d2">
                    <span class="yuan">收</span>
                    <span>{{item.name[index]}}</span>
                    <span>{{ item.dizhi }}</span>
                </div>
                <div class="d3">
                    <span class="yuan">接</span>
                    <span>{{item.name[index+1]}}</span>
                    <span>{{item.dizhi}}</span>
                </div>
                <div class="ewm">
                    <img :src="item.img" alt="">
                </div>
            </div>
        </RouterLink>
    </div>
</template>

<style scoped>
.ewm {
    display: flex;
    justify-content: center;
}

a {
    text-decoration: none;
    color: #111;
}

.d3>span:nth-child(3) {
    color: #ada7a7;
}

.d3>span:nth-child(1) {
    color: white;
    background-color: rgb(3, 219, 3);
    border-radius: 50%;
    width: 20px;
    height: 19px;
    text-align: center;
}

.d3 {
    display: flex;
    gap: 10px;
}

.d2>span:nth-child(3) {
    color: #ada7a7;
}

.d2>span:nth-child(1) {
    color: white;
    background-color: blue;
    border-radius: 50%;
    width: 20px;
    height: 19px;
    text-align: center;
}

.d2 {
    display: flex;
    gap: 10px;
}

.d1 {
    color: #ada7a7;
    border-bottom: 2px black solid;
}

.hezi {
    height: 550px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 20px);
    width: 100%;
    margin-top: 10px;

}

.dd {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: white;
    width: 88%;
    margin: 0 auto;
}
</style>
